<template>
  <div class="home-wrap">
    <header-component></header-component>
    <home-swiper :banners="banners"></home-swiper>
		<short-nav></short-nav>
    <home-personalized :personalizeds="personalizeds"></home-personalized>
    <mv></mv>
  </div>
</template>

<script>
import HeaderComponent from '../../components/Header'
import HomeSwiper from './components/Swiper'
import ShortNav from './components/ShortNav'
import HomePersonalized from './components/Personalized'
import NewSong from './components/NewSong'
import Mv from './components/Mv'
export default {
  name: 'Home',
  data () {
    return {
      banners: [],
      personalizeds: [],
      songs: [],
      mvs: []
    }
  },
  components: {
    HeaderComponent,
    HomeSwiper,
		ShortNav,
    HomePersonalized,
    NewSong,
    Mv
  },
  methods: {
    // 获取banner数据
    async getBannerData() {
      try {
        let res = await this.$api.getBanner()
        if (res.code === 200) {
          this.banners = res.banners
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 获取推荐歌单
    async getPersonalized () {
      try {
        let res = await this.$api.getPersonalized(6)
        if (res.code === 200) {
          this.personalizeds = res.result
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 获取新歌推荐
    async getTopSong () {
      try {
        let res = await this.$api.getTopSong(0)
        if (res.code === 200) {
          this.songs = res.data
        }
      } catch (error) {
        console.log(error)
      }
    }
  },
  created () {
    this.getBannerData()
    this.getPersonalized()
    this.getTopSong()
  }
}
</script>

<style lang="stylus" scoped>
	.home-wrap {
    width: 100%;
    min-height: 100%;
    background: url('../../assets/images/bg.png') no-repeat;
    background-size: cover;
    background-attachment: fixed;
    padding-bottom: 1.6rem;
		padding-top: 0.8rem;
	}
</style>
